<template>
  <div class="day-management-container table-auto-height">
    <page-title :route-info="route" />

    <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
      <div>
        <el-button type="primary" @click="handleAdd">
          <template #icon>
            <plus />
          </template>
          添加
        </el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column align="center" label="序号" type="index" width="80">
        <template #default="{ row }">
          <span>{{ row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="套餐名称" prop="name" />

      <el-table-column align="center" label="价格" prop="price">
        <template #default="{ row }">
          <span>{{ row.price ? `${row.price / 100}元` : '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="天数" prop="days">
        <template #default="{ row }">
          <span>{{ row.days ? `${row.days}天` : '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="更新时间" prop="updatedAt" />

      <el-table-column align="center" fixed="right" label="操作" width="120">
        <template #default="{ row }">
          <div class="operation">
            <div class="center_flex">
              <el-button link size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
              <div class="interval-button" />
            </div>

            <div class="center_flex">
              <el-button link size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </div>
          </div>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>

    <el-pagination
      background
      :current-page="queryParams.page"
      :layout="layout"
      :page-size="queryParams.limit"
      style="justify-content: flex-end; margin-top: 15px"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import edit from './components/editDialog.vue'
import { deleteApi, getList } from '/@/api/my'

const baseUrl = import.meta.env.VITE_APP_BASE_URL
const $baseConfirm = inject<any>('$baseConfirm')
const $baseMessage = inject<any>('$baseMessage')
const editRef = ref<any>(null)
const route = useRoute()
const loading = ref(false)
const layout = ref<string>('total, sizes, prev, pager, next, jumper')
const total = ref<number>(0)

const queryParams = ref({
  page: 1,
  limit: 10,
})

const tableList = ref<any>([])

const handleAdd = () => {
  editRef.value?.showEdit()
}

const handleEdit = (row: any) => {
  editRef.value?.showEdit(row)
}

const handleDelete = async (row: any) => {
  $baseConfirm('你确定要删除当前项吗', null, async () => {
    await deleteApi(row)
    $baseMessage('删除成功', 'success', 'vab-hey-message-success')
    await fetchData()
  })
}

// 分页
const handleSizeChange = (value: number) => {
  queryParams.value.page = 1
  queryParams.value.limit = value
  fetchData()
}

const handleCurrentChange = (value: number) => {
  queryParams.value.page = value
  fetchData()
}

const fetchData = async () => {
  loading.value = true
  const {
    code,
    message,
    result: { count, rows },
  } = await getList(queryParams.value)
  if (code === 0) {
    tableList.value = rows
    total.value = count
  } else {
    ElMessage.error(message)
  }
  loading.value = false
}

onMounted(() => {
  fetchData()
})
</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  justify-content: center;
}
</style>
